<template>
  <!-- 四个统计组件 -->
  <el-row :gutter="20" style="height: 160px;">
    <el-col v-for="(item, index) in statistics" :key="index" :span="6">
      <el-card shadow="never">
        <div class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-title">{{ item.title }}</div>
            <div class="statistic-number" ref="numberRefs">
              {{ animatedNumbers[index] }}
            </div>
          </div>
          <div class="statistic-footer">
            <div class="footer-item">
              <div class="trend-info">
                <span>{{ item.description }}</span>
                <span :class="item.trendClass" style="font-weight: bold; margin-left: 4px;">
                  {{ item.trend }}<el-icon><CaretTop v-if="item.trend > 0" /><CaretBottom v-else /></el-icon>
                </span>
              </div>
            </div>
          </div>
          <div class="card-image" style="width: 60px;height: 60px;border-radius: 50%;display: flex; justify-content: center; align-items: center;" :style="{ backgroundImage: `url(${item.bgSrc})` }">
            <img :src="item.imageSrc" alt="图片丢失" />
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 折线柱状图和环形图 -->
  <el-row :gutter="20" style="margin-top: 30px;">
    <el-col :span="18" style="height: 400px;">
      <el-card class="chart-card" body-style="height: 100%; padding: 0;" shadow="never">
        <div class="chart-wrapper">
          <TrendChart ref="trendChartRef" />
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" style="height: 400px;">
      <el-card class="chart-card" body-style="height: 100%; padding: 0;" shadow="never">
        <div class="chart-wrapper">
          <DepartmentPieChart ref="pieChartRef" />
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 表格  -->
  <el-card v-loading="loading" style="margin-top: 20px;color: #333333;" shadow="never">
    <h2 style="font-size: 16px;">今日门诊记录</h2>
    <el-divider style="margin-bottom: 0"></el-divider>
    <el-table :data="tableData" style="width: 100%;font-size: 14px;" stripe>
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="status" label="就诊状态" width="120" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === '已接诊' ? 'success' : scope.row.status === '接诊中' ? 'warning' : 'danger'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="patientId" label="患者编号" width="120" align="center"></el-table-column>
      <el-table-column prop="patientName" label="患者姓名" width="120" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" width="120" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" width="120" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号码" width="120" align="center"></el-table-column>
      <el-table-column prop="type" label="门诊类型" width="120" align="center"></el-table-column>
      <el-table-column prop="department" label="科室" width="60" align="center"></el-table-column>
      <el-table-column prop="doctor" label="挂号医生" width="120" align="center"></el-table-column>
      <el-table-column prop="updateTime" label="最后更新时间" align="center"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      size="small"
      layout="prev, pager, next"
      :total="1000"
      class="pagination"
    />
  </el-card>
  <!-- 新增 -->
  <h1 style="font-size: 20px;color: brown">
    时间问题 导致图表相关后端接口未开发完成！！！！！
  </h1>
</template>

<script setup>
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import TrendChart from '@/components/charts/TrendChart.vue'
import DepartmentPieChart from '@/components/charts/DepartmentPieChart.vue'

const loading = ref(false)
const animatedNumbers = reactive([0, 0, 0, 0])

/*统计数据定义*/
const statistics = ref([
  {
    title: '今日接诊人数',
    value: 100,
    description: '较昨日',
    trend: '+10',
    trendClass: 'red',
    imageSrc: require('../../assets/images/statisticalReport/list1.png'),
    bgSrc: require('../../assets/images/statisticalReport/1.png'),
  },
  {
    title: '本周接诊人数',
    value: 500,
    description: '较上周',
    trend: '+50',
    trendClass: 'green',
    imageSrc: require('../../assets/images/statisticalReport/list2.png'),
    bgSrc: require('../../assets/images/statisticalReport/2.png'),
  },
  {
    title: '本月接诊人数',
    value: 2000,
    description: '较上月',
    trend: '+200',
    trendClass: 'green',
    imageSrc: require('../../assets/images/statisticalReport/list3.png'),
    bgSrc: require('../../assets/images/statisticalReport/3.png'),
  },
  {
    title: '本年接诊人数',
    value: 10000,
    description: '较上年',
    trend: '+1000',
    trendClass: 'green',
    imageSrc: require('../../assets/images/statisticalReport/list4.png'),
    bgSrc: require('../../assets/images/statisticalReport/4.png'),
  }
])

/*动画*/
const animateValue = (start, end, duration, index) => {
  const range = end - start
  const minFrame = 50
  let currentFrame = 0
  const totalFrames = Math.max(minFrame, duration * 60 / 1000)
  const step = range / totalFrames

  const animate = () => {
    currentFrame++
    const progress = currentFrame / totalFrames
    const currentValue = Math.floor(start + (range * easeOutQuart(progress)))
    animatedNumbers[index] = currentValue

    if (currentFrame < totalFrames) {
      requestAnimationFrame(animate)
    }
  }
  animate()
}

/*缓动函数*/
const easeOutQuart = (x) => {
  return 1 - Math.pow(1 - x, 4)
}

const startAnimation = () => {
  statistics.value.forEach((stat, index) => {
    animateValue(0, stat.value, 2000, index)
  })
}

/*定义表格数据*/
const tableData = ref([
  { index: 1, status: '已接诊', patientId: 'P001', patientName: '张三', gender: '男', age: 30, phone: '13888888888', department: '儿科', type: '出诊', doctor: '王医生', updateTime: '2023-05-01 12:00:00' },
  { index: 2, status: '未接诊', patientId: 'P002', patientName: '李四', gender: '女', age: 28, phone: '13999999999', department: '骨科', type: '复诊', doctor: '李医生', updateTime: '2023-05-02 13:00:00' },
  { index: 3, status: '接诊中', patientId: 'P003', patientName: '王五', gender: '男', age: 35, phone: '13777777777', department: '眼科', type: '复诊', doctor: '赵医生', updateTime: '2023-05-03 14:00:00' },
  { index: 4, status: '已接诊', patientId: 'P004', patientName: '赵六', gender: '女', age: 32, phone: '13666666666', department: '儿科', type: '复诊', doctor: '李医生', updateTime: '2023-05-04 15:00:00' },
  { index: 5, status: '已接诊', patientId: 'P005', patientName: '钱七', gender: '男', age: 40, phone: '13555555555', department: '骨科', type: '复诊', doctor: '赵医生', updateTime: '2023-05-05 16:00:00' },
  { index: 6, status: '接诊中', patientId: 'P006', patientName: '孙八', gender: '女', age: 29, phone: '13444444444', department: '眼科', type: '复诊', doctor: '王医生', updateTime: '2023-05-06 17:00:00' },
  { index: 7, status: '已接诊', patientId: 'P007', patientName: '周九', gender: '男', age: 33, phone: '13333333333', department: '儿科', type: '复诊', doctor: '李医生', updateTime: '2023-05-07 18:00:00' },
  { index: 8, status: '已接诊', patientId: 'P008', patientName: '吴十', gender: '女', age: 27, phone: '13222222222', department: '骨科', type: '复诊', doctor: '赵医生', updateTime: '2023-05-08 19:00:00' },
  { index: 9, status: '接诊中', patientId: 'P009', patientName: '郑十一', gender: '男', age: 31, phone: '13111111111', department: '眼科', type: '复诊', doctor: '王医生', updateTime: '2023-05-09 20:00:00' },
  { index: 10, status: '已接诊', patientId: 'P010', patientName: '王十二', gender: '女', age: 29, phone: '13000000000', department: '骨科', type: '复诊', doctor: '李医生', updateTime: '2023-05-10 21:00:00' }
])

const trendChartRef = ref(null)
const pieChartRef = ref(null)

// 使用 ResizeObserver 监听容器大小变化
onMounted(() => {
  startAnimation()
})
</script>

<style scoped>
.statistic-card {
  position: relative;
  padding: 20px;
  height: 100%;
}

.statistic-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statistic-title {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.statistic-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.statistic-footer {
  margin-top: 16px;
}

.footer-item {
  display: flex;
  align-items: center;
}

.trend-info {
  display: flex;
  align-items: center;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.trend-info .el-icon {
  margin-left: 2px;
}

.card-image {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.red {
  color: var(--el-color-danger);
}

.green {
  color: var(--el-color-success);
}

.chart-card {
  height: 100%;
}

.chart-card :deep(.el-card__body) {
  height: 100%;
  padding: 0;
}

:deep(.el-card) {
  background-color: var(--el-bg-color);
  border-color: var(--el-border-color);
}

:deep(.el-table) {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

:deep(.el-table th),
:deep(.el-table tr) {
  background-color: var(--el-bg-color);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: var(--el-fill-color-blank);
}

:deep(.el-pagination) {
  --el-pagination-bg-color: var(--el-bg-color);
  --el-pagination-hover-color: var(--el-color-primary);
}

/* 暗色主题下的样式 */
:deep(.dark) {
  /* 统计卡片样式 */
  .el-card {
    background-color: var(--el-bg-color) !important;
    border-color: var(--el-border-color) !important;
  }

  .statistic-title {
    color: var(--el-text-color-regular) !important;
  }

  .statistic-number {
    color: var(--el-text-color-primary) !important;
  }

  /* 表格样式 */
  .el-table {
    background-color: var(--el-bg-color) !important;
    color: var(--el-text-color-primary) !important;

    th, td {
      background-color: var(--el-bg-color) !important;
      border-color: var(--el-border-color) !important;
    }

    th {
      color: var(--el-text-color-primary) !important;
    }

    td {
      color: var(--el-text-color-regular) !important;
    }
  }

  /* 分页器样式 */
  .el-pagination {
    background-color: var(--el-bg-color) !important;

    .el-pagination__total,
    .el-pagination__jump {
      color: var(--el-text-color-regular) !important;
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      background-color: var(--el-bg-color) !important;
      color: var(--el-text-color-regular) !important;
    }
  }
}

/* 确保深色主题下的边框颜色正确 */
:deep(.dark) .el-card {
  border: 1px solid var(--el-border-color) !important;
}

/* 确保表格在深色主题下的边框正确 */
:deep(.dark) .el-table--border::after,
:deep(.dark) .el-table--group::after,
:deep(.dark) .el-table::before {
  background-color: var(--el-border-color);
}

/* 确保表格头部在深色主题下正确显示 */
:deep(.dark) .el-table th.el-table__cell {
  background-color: var(--el-bg-color-overlay);
}

:deep(.el-pagination.is-background) .el-pager li:not(.is-disabled).is-active {
  background-color: var(--el-color-primary);
}

:deep(.el-pagination.is-background) .el-pager li {
  background-color: var(--el-fill-color-blank);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color);
}

:deep(.el-pagination.is-background) .el-pager li:not(.is-disabled):hover {
  color: var(--el-color-primary);
}

:deep(.el-pagination.is-background) .btn-prev,
:deep(.el-pagination.is-background) .btn-next {
  background-color: var(--el-fill-color-blank);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color);
}

:deep(.el-pagination.is-background) .btn-prev:hover,
:deep(.el-pagination.is-background) .btn-next:hover {
  color: var(--el-color-primary);
}

/* 分页器样式 */
.pagination {
  float: right;
  margin: 20px 0;
}

:deep(.el-pagination.is-background) .el-pager li {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color);
}

:deep(.el-pagination.is-background) .el-pager li:not(.is-disabled).is-active {
  background-color: var(--el-color-primary);
  color: #ffffff;
  border-color: var(--el-color-primary);
}

:deep(.el-pagination.is-background) .el-pager li:not(.is-disabled):hover {
  color: var(--el-color-primary);
}

:deep(.el-pagination.is-background) .btn-prev,
:deep(.el-pagination.is-background) .btn-next {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color);
}

:deep(.el-pagination.is-background) .btn-prev:hover,
:deep(.el-pagination.is-background) .btn-next:hover {
  color: var(--el-color-primary);
}

/* 页面容器样式 */
.statistical-container {
  height: 100%;
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.statistical-container::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* 确保内容区域正确显示 */
:deep(.el-card) {
  margin-bottom: 20px;
}

:deep(.el-card:last-child) {
  margin-bottom: 0;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
